<template>
  <el-tree  :data="treeData" node-key="id"    default-expand-all>
    <row slot-scope="{ data }" >
        <span slot="name">{{data.name}}</span>
        <span slot="manager" class="manager">{{data.manager}}</span>
        <template slot="operation">
        <el-dropdown-item @click.native="handleAdd(data)">新增子部门</el-dropdown-item>
        <el-dropdown-item @click.native="handleEdit(data)">编辑部门</el-dropdown-item>
        <el-dropdown-item @click.native="handleDel(data) " class="del-btn">删除部门</el-dropdown-item>
        </template>
    </row>
  </el-tree>
</template>

<script>
import Row from "./Row.vue";
export default {
    props:{
        treeData:{
            type:Array,
            required:true
        }
    },
  components: {
    Row,
  },
  methods: {
    //新增部门
    handleAdd(node){
      this.$emit("click",{node,type:"add"})
    },
    //编辑部门
    handleEdit(node){
      this.$emit("click",{node,type:"edit"})
    },
    // 删除部门
    handleDel(node){
      this.$emit("click",{node,type:"del"})
    },
  
  },
};
</script>

<style lang="scss" scoped>
.manager{
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>